const path = require('path');
//entry 入口 output出口

//导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin');

//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',
    filename: './index.html'
})

//清理dist的插件
//解构赋值
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const cleanPlugin = new CleanWebpackPlugin();
module.exports = {
    //代表webpack运行的模式
    mode: 'development',
    //配置source map
    // devtool: 'eval-source-map', //开发时 暴露源码
    devtool: 'nosources-source-map', //生产时 显示行号不暴露源码
    //入口
    entry: path.join(__dirname,'./src/index1.js'),
    //出口
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'js/bundle.js'
    },
    plugins: [htmlPlugin,cleanPlugin], //通过plugins节点使插件生效
    devServer: {
        open:true,
        port: 80,
    },
    module: {
        rules: [
            //处理css文件
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            //处理less文件
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.jpg|png|gif$/,
                use:'url-loader?limit=222&outputPath=images'
            },
            
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            }
        ]
    },
    resolve: {
        alias: {
            '@':path.join(__dirname,'./src'),
        }
    }
}

